<script setup>
import { defineProps } from "vue";

const props = defineProps({
  yjfzSlotHeight: {
    type: String,
    default: "0px",
  },
});

import { useRoute, useRouter } from "vue-router";
import ChatText from "@/components/AI/ChatText.vue";
const route = useRoute();
const router = useRouter();
const btnList = [
  {
    title: "患者床头卡",
    name: "PatientCard",
  },
  {
    title: "详情",
    name: "InspectionTesting",
  },
  {
    title: "文件管理",
    name: "FileManagement",
  },
  {
    title: "受邀列表",
    name: "InvitedConsultation",
  },
  {
    title: "申请列表",
    name: "RequestConsultation",
  },
];
const delimiterIndex = btnList.value?.findIndex((i) => i.type !== 1);
const clickRoute = (route) => {
  console.log("route: ", route);
  router.push({ name: route.name });
};
const chatRecord = ref([]);
const apiUrl = import.meta.env.VITE_API_URL;
const url = `${apiUrl}/lanshing-smartlan/conversation`;
// 聊天功能
const eventSource = ref();
const isClosed = ref(false);
const createEventSource = (message) => {
  eventSource.value = new EventSource(
    `${url}?message=${message ? message : "你是谁"}`
  );
  eventSource.value.onmessage = (e) => {
    if (!isClosed.value) {
      chatRecord.value.unshift({
        content: "",
        type: 0,
      });
    }
    isClosed.value = true;
    if (e.data === "[DONE]") {
      eventSource.value.close();
      eventSource.value = null;
      isClosed.value = false;
      return;
    }
    chatRecord.value[0].content += JSON.parse(e.data);
  };
};
createEventSource();
const message = ref(null);
const send = () => {
  if (!message.value || isClosed.value) {
    return;
  }
  chatRecord.value.unshift({
    content: message.value,
    type: 1,
  });
  createEventSource(message.value);
  message.value = null;
};

const aiStatus = ref(false);
const AI = ref(null);
const aiHeight = ref(null);
const mapStyle = new Map();
const changeStyle = () => {
  return;
  if (!aiStatus.value) {
    //获取AIref父元素
    let parent = AI.value.parentElement;
    console.log("parent: ", parent);
    //将parent的同级元素全部隐藏
    parent.parentElement.childNodes.forEach((node) => {
      mapStyle.set(node, node.style?.display);
      if (node !== parent) {
        node.style.display = "none";
      } else {
        node.style.display = "block";
      }
    });
    // 将parent元素的高度改为100%
    parent.style.height = "100%";
    aiStatus.value = true;
  } else {
    //获取AIref父元素
    let parent = AI.value.parentElement;
    //将parent的同级元素全部隐藏
    parent.parentElement.childNodes.forEach((node) => {
      node.style.display = mapStyle.get(node);
    });
    // 将parent元素的高度改为100%
    parent.style.height = aiHeight.value + "px";
    console.log(parent.style.height, aiHeight.value);
    aiStatus.value = false;
  }
};
onMounted(() => {
  aiHeight.value = AI.value.parentElement.getBoundingClientRect().height;
});
</script>

<template>
  <div class="AI" ref="AI">
    <div class="ai-header">
      <div class="sub-title">
        <img src="@/assets/aiIcon.gif" alt="" />
        <!-- <span> 智能小蓝 </span> -->
      </div>
      <span @click="changeStyle">
        <svg
          v-show="!aiStatus"
          t="1727428422088"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4254"
          width="16"
          height="16"
        >
          <path
            d="M184 789.088L389.309 583.78a8 8 0 0 1 11.313 0l39.598 39.598a8 8 0 0 1 0 11.313L234.912 840H384c8.837 0 16 7.163 16 16v48a8 8 0 0 1-8 8H144c-17.673 0-32-14.327-32-32V632a8 8 0 0 1 8-8h48c8.837 0 16 7.163 16 16v149.088z m656-554.422L634.569 440.098a8 8 0 0 1-11.314 0L583.657 400.5a8 8 0 0 1 0-11.314L788.843 184H640c-8.837 0-16-7.163-16-16v-48a8 8 0 0 1 8-8h248c17.673 0 32 14.327 32 32v248a8 8 0 0 1-8 8h-48c-8.837 0-16-7.163-16-16V234.666z"
            fill="#8a8a8a"
            p-id="4255"
          ></path>
        </svg>

        <svg
          v-show="aiStatus"
          t="1727428532312"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5438"
          width="16"
          height="16"
        >
          <path
            d="M597.333333 395.861333V192a21.333333 21.333333 0 0 0-42.666666 0v256a21.333333 21.333333 0 0 0 21.333333 21.333333h256a21.333333 21.333333 0 0 0 0-42.666666h-205.12L890.24 163.306667a21.333333 21.333333 0 0 0-30.165333-30.165334L597.333333 395.861333z m-170.666666 232.277334V832a21.333333 21.333333 0 0 0 42.666666 0V576a21.333333 21.333333 0 0 0-21.333333-21.333333H192a21.333333 21.333333 0 0 0 0 42.666666h205.12L133.76 860.693333a21.333333 21.333333 0 0 0 30.165333 30.165334L426.666667 628.138667z"
            fill="#8a8a8a"
            p-id="5439"
          ></path>
        </svg>
      </span>
    </div>
    <div class="ai-content">
      <slot name="yjfz"></slot>
      <div class="record">
        <el-scrollbar>
          <template v-for="(item, index) in chatRecord" :key="index">
            <!-- <template v-if="item.type === 1">
              <div class="self" v-html="marked.parse(item.content)"></div>
            </template> -->
            <template>
              <ChatText
                :content="item.content"
                :index="index"
                :isClosed="isClosed"
              ></ChatText>
            </template>
          </template>
        </el-scrollbar>
      </div>
      <div class="ribbon">
        <el-scrollbar class="horizontal-scroll">
          <div class="menu">
            <div
              v-for="(item, index) in btnList"
              :key="item"
              @click="clickRoute(item)"
            >
              <div class="delimite" v-if="index === delimiterIndex"></div>
              <span>{{ item?.title }}</span>
            </div>
          </div>
        </el-scrollbar>
        <div class="input">
          <svg-icon name="edit" style="width: 16px; height: 16px" />

          <input
            type="text"
            v-model="message"
            @keydown.enter="send"
            placeholder="你可以向我提问，输入”/“查看快捷指令"
            style="
              background: linear-gradient(
                319.35deg,
                rgba(38, 36, 36, 0.4) 15.44%,
                rgba(0, 0, 0, 0.172) 84.72%
              );
              color: #fff;
              font-size: 14px;
            "
          />
          <div @click="send">
            <svg-icon name="send" style="width: 16px; height: 16px" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.AI {
  width: 100%;
  height: 100%;
  padding-top: 4px;
  .ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 16px;
    svg {
      cursor: pointer;
    }
  }
  .sub-title {
    position: relative;
    display: flex;
    align-items: center;
    ::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px; /* 根据需要调整渐变条的高度 */
      background: linear-gradient(
        to right,
        rgba(7, 157, 121, 0.5) 0%,
        rgba(143, 255, 228, 0.5) 30%,
        rgba(7, 157, 121, 0.5) 80%,

        rgba(33, 33, 33, 0.41) 100%
      );
    }
    img {
      width: 45px;
      height: 45px;
      margin-right: 6px;
      height: 100%;
    }
    span {
      color: #fff;
      text-align: center;
      font-family: "Microsoft YaHei", serif;
      font-size: 18px;
      font-style: normal;
      font-weight: 700;
    }
  }
  .ai-content {
    width: 100%;
    height: calc(100% - 32px);
    .record {
      width: 100%;
      height: calc(100% - 96px);
      // height: 100%;
      padding: 0 17px 10px;
      //background-color: #fff;
      display: flex;
      flex-direction: column-reverse;
      // overflow-y: scroll;
      // & > div {
      //   width: fit-content;
      //   padding: 5px 5px 5px 10px;
      //   border-radius: 0 9px 9px 9px;
      //   background: #f3f3f3;
      //   color: #2c2c2c;
      //   font-size: 14px;
      //   font-weight: 400;
      //   margin-top: 4px;
      //   position: relative;
      // }
      .self {
        width: fit-content;
        border-radius: 9px 0 9px 9px;
        padding: 5px 10px 5px 5px;
        background: #5e5e5e;
        text-align: right;
        color: #fff;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        margin-left: auto;
      }
    }
    .ribbon {
      width: 100%;
      height: 96px;
      border-radius: 9px;
      padding: 10px 17px 17px;
      .horizontal-scroll {
        height: 32px;
        overflow-x: auto; /* 只允许横向滚动 */
        overflow-y: hidden; /* 禁止纵向滚动 */
        white-space: nowrap; /* 防止换行，确保子元素在一行显示 */
      }
      .menu {
        width: 100%;
        display: flex;
        // align-items: center;
        margin-bottom: 10px;
        height: 20px;
        div {
          width: auto;
          margin-right: 10px;
          cursor: pointer;
          display: flex;
          align-items: center;
        }
        span {
          color: #fff;
          font-family: "Microsoft YaHei", serif;
          font-size: 12px;
          font-style: normal;
          font-weight: 700;
          border-bottom: 1px solid #17c1c1;
        }
        .delimite {
          display: inline-block;
          width: 1px;
          height: 12px;
          background-color: #000;
          margin-right: 10px;
        }
      }

      .input {
        display: flex;
        width: 100%;
        height: 40px;
        gap: 8px;
        align-items: center;
        // border-radius: 9px;
        border: 2px solid rgba(71, 69, 69, 0.24);
        // border-image-source: linear-gradient(
        //   91.28deg,
        //   rgba(71, 69, 69, 0.24) 1.61%,
        //   rgba(0, 0, 0, 0.4) 98.1%
        // );

        background: linear-gradient(
          319.35deg,
          rgba(38, 36, 36, 0.4) 15.44%,
          rgba(0, 0, 0, 0.172) 84.72%
        );

        padding: 0 8px;
        input {
          width: calc(100% - 16px - 16px - 18px);
          height: 24px;
          border: none;
          outline: none;
        }
        div {
          display: flex;
          align-items: center;
          margin-left: auto;
          cursor: pointer;
        }
        // div {
        //   display: flex;
        //   align-items: center;
        //   justify-content: center;
        //   width: 49px;
        //   height: 27px;
        //   margin-left: auto;
        //   border-radius: 6px;
        //   border: 1px solid #a6a6a6;
        //   background: #dcdcdc;
        //   cursor: pointer;
        // }
      }
    }
  }
}
ul,
ol {
  list-style: initial;
}
b,
strong {
  font-weight: initial;
}
</style>
